<template>
	<view class="content">
		<view class="wrap">
			<swiper class="swiper" circular :indicator-dots="bannerArr.length>1" :autoplay="autoplay">
				<swiper-item v-for="(i,index) in bannerArr" :key="i">
					<image lazy-load :lazy-load-margin="0" style="width: 100%; height: 240rpx;" mode="scaleToFill"
					 :src="`${app.imgUrl}${i}`" @click="callPhone(i,index)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="sticky">
			<view class="tab">
				<view :class="curIndex==index?'tab-item sel-tab':'tab-item'" @click="selTab(item,index)"
					v-for="(item,index) in menu" :key="index">
					{{item.value}}
				</view>
			</view>
			<view class="date">
				<span>更新时间：{{updateTime?updateTime:"--"}}</span>
			</view>
			<view style="width: 100%;display: flex;">
				<view class="tableHeader" :style="{'width':i.w}" v-for="(i,index) in headList" :key="index">
					{{i.name}}
				</view>
			</view>
		</view>
		<!-- 表格数据行 -->
		<view v-if="list.length>0">
			<view :class="(index)%2!=0?'m-tr bg':'m-tr'" v-for="(item,index) in list" :key="index">
				<view class="m-td" v-for="(j,jIndex) in headList" :key="j.name" :style="{width:j.w}">
					<view v-if="item[jIndex]!==null&&homeMenuData.type===1&&(jIndex===2||jIndex===4)">
						<view>{{item[jIndex]}}</view>
						<view class="upDownCla" :style="{color:tool.setUpDownColor(item[5])}" v-if="jIndex===2">{{tool.setUpDownData(item[5])}}</view>
						<view class="upDownCla" :style="{color:tool.setUpDownColor(item[6])}" v-else-if="jIndex===4">{{tool.setUpDownData(item[6])}}</view>
					</view>
					<view v-else-if="item[jIndex]!==null&&homeMenuData.type===3&&jIndex===2">
						<view>{{item[jIndex]}}</view>
						<view class="upDownCla" :style="{color:tool.setUpDownColor(item[4])}" v-if="jIndex===2">{{tool.setUpDownData(item[4])}}</view>
					</view>
					<span v-else>{{item[jIndex]}}</span>
				</view>
			</view>
		</view>
		<view class="loading-more noData" v-if="list.length==0">
			<text class="loading-more-text">{{isNoDataText}}</text>
		</view>

		<view class="loading-more" v-if="isLoading || isNoData">
			<text class="loading-more-text">{{loadingText}}</text>
		</view>
		<view class="loading-more" v-if="isNoTabData">
			<text class="loading-more-text">{{isNoTabData}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import tool from "../../utils/common.js"
	const app = getApp().globalData.utils
	const swiperRef = ref(null);
	const data = reactive({
		menu: [],
		homeMenuData: {},
		curIndex: 0,
		bannerArr: [],
		headList: [],
		
		list: [],
		params: {
			menuId: 1,
			pageIndex: 0,
			pageSize: 20
		},
		total: 0,
		autoplay: true,
		isNoDataText: '',
		isLoading: false, //加载中
		loadingText: '', //加载文字
		isNoData: false, //没有更多数据
		updateTime:'',
		isNoTabData:''
	})

	const {
		homeMenuData,
		menu,
		curIndex,
		bannerArr,
		headList,
		headTypeList,
		headType2List,
		list,
		params,
		autoplay,
		total,
		isNoDataText,
		isLoading,
		loadingText,
		isNoData,
		updateTime,
		isNoTabData
	} = toRefs(data)
	onLoad(async (options) => {
		homeMenuData.value = JSON.parse(options.menuData)
		uni.setNavigationBarTitle({
			title: homeMenuData.value.name, // 页面标题为传递的标题或默认标题
		});
		if (homeMenuData.value.type === 3) {
			headList.value = tool.headType2List
		} else {
			headList.value = tool.headTypeList
		}
		console.log(homeMenuData.value)
		getHomeAd()
		await getMenu(homeMenuData.value.id)
		if(isNoTabData.value)return
		getList()
	})
	onReachBottom(() => {
		if (isNoData.value) {
			return
		}
		getList()
	})

	onPullDownRefresh(async () => {
		// 实现数据更新的逻辑
		await getHomeAd()
		await getMenu(homeMenuData.value.id)
		if(isNoTabData.value)return
		params.value.pageIndex = 0
		isNoData.value = false
		loadingText.value = ''
		isLoading.value = false
		await getList()
		// 模拟数据加载
		setTimeout(() => {
			// 停止下拉刷新
			uni.stopPullDownRefresh();
		}, 800);
	})
	const getHomeAd = async () => {
		const res = await app.getHomeAd()
		bannerArr.value = res
	}
	const getMenu = async (id) => {
		const res = await app.getHomeDataMenu({
			homeMenuId: id
		})
		let obj = res
		let arr = []
		for (let key in obj) {
			let label = {
				id: key,
				value: obj[key]
			}
			arr.push(label)
		}
		menu.value = arr
		if(arr.length==0){
			return isNoTabData.value="暂无配置tab菜单"
		}else{
			isNoTabData.value=""
		}
		let index = arr.findIndex(i => i.id == params.value.menuId)
		if (index == -1) {
			params.value.menuId = arr[0].id
			curIndex.value = 0
		}
	}
	/* 点击一键拨号
		effect 0:静态;1:弹出手机号;2:弹出二维码;3:跳转
	*/
	const callPhone = (val, index) => {
		return
		switch (index) {
			case 0:
				tool.callPhone(val.effectContent)
				break;
			case 1:
				uni.navigateTo({
					url: `addv?addvData=${JSON.stringify(val)}`
				});
				break;
		}
	}
	/* 获取列表数据 */
	const getList = async () => {
		console.log(22)
		if (isLoading.value) {
			return
		}
		isLoading.value = true
		if (params.value.pageIndex == 0) {
			list.value = []
		} else {
			loadingText.value = "加载中···"
		}
		let res
		if (homeMenuData.value.type === 1) {
			res = await app.getSpecification(params.value)
		} else {
			res = await app.getSpecification2(params.value)
		}

		// uni.stopPullDownRefresh()
		total.value = res.totalCount
		if (res.data == null) {
			isLoading.value = false
			isNoDataText.value = '暂无列表数据'
			return
		}
		if(res.updateTime){
			updateTime.value = res.updateTime.replace("T"," ")
		}
		setTimeout(() => {
			if (res.data.length > 0) {
				isNoDataText.value = ''
				res.data.forEach(item => {
					list.value.push(item)
				})
				params.value.pageIndex++

			}
			isLoading.value = false
			isNoData.value = list.value.length >= total.value
			if (isNoData.value) {
				return loadingText.value = '没有更多了'
			}
		}, 200)

	}
	const selTab = (val, key) => {
		if (curIndex.value == key) return
		params.value = {
			menuId: 1,
			pageIndex: 0,
			pageSize: 20
		}
		curIndex.value = key
		params.value.menuId = val.id
		isNoData.value = false
		loadingText.value = ''
		getList()
	}
	
	onShareAppMessage((res) => { //发送给朋友
		return {
			title: '钢价通',
			path: 'pages/home/index',
		}
	})
	onShareTimeline((res) => { //分享到朋友圈
		return {
			title: '钢价通',
			path: 'pages/home/index',
		}
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
	}

	.wrap {
		width: 100%;
		height: 240rpx;
	}

	.swiper {
		height: 240rpx;
		z-index: 999;
	}

	.swiper-item {
		display: block;
		height: 240rpx;
		line-height: 240rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		/* z-index: 999; */
	}
	.date{
		font-size:24rpx;
		padding:10rpx 0 10rpx 10rpx;
		color:#838487;
		background-color: #fff;
		border-bottom: 1px solid #e5e5e5;
	}
	.tab {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		background-color: #cd4541;
		color: #fff;
		font-size: 28rpx;
	}

	.tab-item {
		padding: 25rpx;
	}

	.sel-tab {
		background-color: #d68079;
	}

	.main {
		width: 100%;
		height: 100%;
	}

	.tableHeader {
		font-size: 28rpx;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #e5e5e5;
		background-color: #fff;
	}

	.m-tr {
		font-size: 24rpx;
		display: flex;
		flex-wrap: nowrap;
		background-color: #fff;
		border-bottom: 1px solid #e5e5e5;
	}

	.bg {
		background-color: #e5e5e5;
	}

	.m-td {
		text-align: center;
		height: 85rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		.upDownCla{
			font-size: 24rpx;
		}
	}

	.loading-more {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		line-height: 50rpx;
		color: #9e9e9e;
		font-size: 28rpx;
	}

	.noData {
		padding: 100rpx 0;
		box-sizing: border-box;
	}
</style>